<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模态框2</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--
        	作者：zxy
        	时间：2019-07-28
        	描述：模态框2
        -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
        	启动大模态框
        </button>
        			<!--有过渡效果-->
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledly="myLargeModalLabel" aria-hidden="true" >
        	<!--模态框会话    大-->
        	<div class="modal-dialog modal-lg" >
        		<!--内容部分-->
        		<div class="modal-content">
        			这是一个大的模态框
        		</div>
        	</div>
        </div>
        
        
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
        	启动小模态框
        </button>
        			<!--有过渡效果-->
        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledly="myLargeModalLabel" aria-hidden="true" >
        	<!--模态框会话    大-->
        	<div class="modal-dialog modal-sm" >
        		<!--内容部分-->
        		<div class="modal-content">
        			这是一个小的模态框
        		</div>
        	</div>
        </div>
        
        
        <!--
        	data-toggle:跟执行哪个类名字
        	data-target:跟执行的id,两个就确定了具体的组件
        	data-whatever:获取当前内容，添加到当前的输入框中
        -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModel"
        	data-whatever="@mdo">
        	给@mdo打开模态框
        </button>
        
        <div class="modal fade" id="exampleModel" tabindex="-1" role="dialog">
        	<!--消息提示框-->
        	<div class="modal-dialog">
        		<!--内容-->
        		<div class="modal-content">
        			<div class="modal-header">
        				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
        					<span>&times;</span>
        				</button>
        				<h4 class="modal-title" id="exampleModelLable">新的消息</h4>
        			</div>
        			<div class="modal-body">
        				<form >
        					<div class="form-group">
        						<!--for是为了改善用户体验-->
        						<label for="recipient-name" class="control-label">接受者</label>
        						<input class="form-control" type="text" id="recipinet-name" />
        					</div>
        				</form>
        			</div>
        			<div class="modal-footer">
        				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        				<button type="button" class="btn btn-primary">Send</button>
        			</div>
        		</div>
        	</div>
        </div>
        <script>                                   /*回调*/
        	$("#exampleModel").on("show.bs.modal",function(event){
        		var button=$(event.relatedTarget)
        		var recipient=button.data("whatever")
        		var modal=$(this);
        		modal.find(".modal-title").text("New Message to"+recipient);
        		modal.find(".modal-body input").val(recipient)
        	})
        </script>
	</body>
</html>
